<template>
  <div class="box">
    <div class="header">
    <div class="header-left">
      <div class="iconfont">&#xe60d;</div>
    </div>
    <div class="header-input">
      <span class="iconfont icon_ss">&#xe63f;</span>
      <span class="icon_con">输入城市/景点/游玩主题</span>
    </div>

    <div class="header-right" @click="gotoLocation">
      {{this.city}}
      <span class="iconfont arrow-icon">&#xe60e;</span>
    </div>
  </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  methods: {
    gotoLocation(){
      this.$router.push("/location")
    }
  },
  computed: {
    ...mapState(['city'])
    // return 必须retrun结果
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
.box
  background #fff
  .header 
   display: flex;
   line-height: 0.86rem;
   background: $bgColor;
   color: #fff;
  .header-left
    width: 0.64rem;
    float: left;
    .back-icon 
      text-align: center;
      font-size: 0.4rem;
  .header-input 
    flex: 1;
    height: 0.64rem;
    line-height: 0.64rem;
    margin-top: 0.12rem;
    margin-left: 0.1rem;
    padding-left: 0.2rem;
    background: #fff;
    box-sizing border-box;
    border-radius: 0.1rem;
    color: #ccc;
    .icon_ss
      font-size 0.5rem
      float left
    .icon_con
     float left
    .header-right 
     min-width: 1.04rem;
     padding: 0 0.1rem;
     float: right;
     text-align: center;
     color: #fff;
     margin-left: 0.2rem;
     box-sizing border-box;
     .arrow-icon 
    
     
       font-size: 0.4rem;
  
</style>